<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="../static/css/mdui.min.css" crossorigin="anonymous" />
    <script src="../static/js/mdui.min.js" crossorigin="anonymous"></script>
    <title>修改员工</title>
</head>

<header class="mdui-appbar">
    <div class="mdui-toolbar mdui-color-theme">
        <a href="welcome.html" class="mdui-typo-headline sys_name">HR系统</a>

        <a href="emp_list" class="mdui-btn mdui-ripple mdui-btn-icon">
            <i class="mdui-icon material-icons">arrow_back</i>
        </a>

        <a href="welcome.html" class="mdui-typo-title">修改员工</a>
        <div class="mdui-toolbar-spacer"></div>
        <a href="javascript:;" class="mdui-btn mdui-ripple mdui-btn-icon right_menu" style="margin-right: 1rem;"
            mdui-menu="{target: '#menu'}">
            <i class="mdui-icon material-icons">more_vert</i>

        </a>
        <ul class="mdui-menu" id="menu">
            <!-- <li class="mdui-menu-item">
              <a href="javascript:;" class="mdui-ripple">Refresh</a>
            </li>
            <li class="mdui-menu-item" disabled>
              <a href="javascript:;">Help & feedback</a>
            </li>
            <li class="mdui-menu-item">
              <a href="javascript:;" class="mdui-ripple">Settings</a>
            </li> -->
            <li class="mdui-divider"></li>
            <li class="mdui-menu-item">
                <a href="javascript:;" onclick="logout()" class="mdui-ripple">
                    <i class="mdui-icon material-icons">power_settings_new</i>
                    <text class="menu-item-text">退出</text>
                </a>
            </li>
        </ul>
    </div>
</header>


<body class="mdui-theme-primary-indigo mdui-theme-layout-auto mdui-theme-accent-indigo">

    <div class="mdui-container-fluid">
        <div class="mdui-row row-layout">
            <form action="emp_update">
                <input type="hidden" name="id" value="${emp.id}"/>

                <div class="mdui-row">
                    <div class="mdui-col-sm-6">
                        <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                            <!-- <i class="mdui-icon material-icons">account_circle</i> -->
                            <div class="mdui-textfield-label" style="color: gray;">姓名</div>
                            <input class="mdui-textfield-input" name="name" value="${emp.name}" type="username" id="reg_username" 
                                required />
                            <!-- <div class="mdui-textfield-error">请输入用户名</div> -->
                        </div>
                    </div>

                    <div class="mdui-col-sm-6">
                        <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0" style="overflow:visible;">
                            <div class="mdui-textfield-label" style="color: gray;">职位</div>
                            <select class="mdui-select" name="job" value="${emp.job}" mdui-select style="margin-left: 8rem;">
                                <option value="秘书">秘书</option>
                                <option value="经理">经理</option>
                                <option value="工程师">工程师</option>
                                <option value="设计师">设计师</option>
                                <option value="分析师">分析师</option>
                            </select>

                            <!-- <select name="job" style="appearance: auto; ">
                            <option value="秘书" selected>秘书</option>
                            <option value="经理">经理</option>
                            <option value="工程师">工程师</option>
                            <option value="设计师">设计师</option>
                            <option value="分析师">分析师</option>
                        </select> -->
                        </div>
                    </div>
                </div>


                <div class="mdui-row">
                    <div class="mdui-col-sm-6">
                        <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">

                            <div class="mdui-textfield-label" style="color: gray;">工资</div>
                            <input class="mdui-textfield-input" name="sal" value="${emp.sal}" type="number" id="reg_username" required />

                        </div>
                    </div>

                    <div class="mdui-col-sm-6">
                        <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                            <div class="mdui-textfield-label" style="color: gray;">性别</div>
                            <div class="mdui-container" style="margin-left: 7.5rem;">
                                <div class="mdui-row-md-4" style="margin-top: -2px;">
                                    <c:if test="${emp.sex == '男'}">
                                        <div class="mdui-col">
                                            <label class="mdui-radio">
                                                <input type="radio" name="sex" value="男" / checked>
                                                <i class="mdui-radio-icon"></i>
                                                男
                                            </label>
                                        </div>
                                        <div class="mdui-col">
                                            <label class="mdui-radio">
                                                <input type="radio" name="sex" value="女" />
                                                <i class="mdui-radio-icon"></i>
                                                女
                                            </label>
                                        </div>
                                    </c:if>
                                    <c:if test="${emp.sex == '女'}">
                                        <div class="mdui-col">
                                            <label class="mdui-radio">
                                                <input type="radio" name="sex" value="男" />
                                                <i class="mdui-radio-icon"></i>
                                                男
                                            </label>
                                        </div>
                                        <div class="mdui-col">
                                            <label class="mdui-radio">
                                                <input type="radio" name="sex" value="女" / checked>
                                                <i class="mdui-radio-icon"></i>
                                                女
                                            </label>
                                        </div>
                                    </c:if>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="mdui-row">
                    <div class="mdui-col-sm-6">
                        <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0" style="overflow:visible;">
                            <div class="mdui-textfield-label" style="color: gray;">领导</div>
                            <select class="mdui-select" name="mgr" value="${emp.mgr}" mdui-select style="margin-left: 8rem;">
                                <c:forEach items="${list}" var="e">
                                    <c:if test="${e.job == '经理' && e.id == emp.mgr}">
                                        <option value="${e.id}" selected>${e.name}</option>
                                    </c:if>
                                    <c:if test="${e.job == '经理' && e.id != emp.mgr}">
                                        <option value="${e.id}">${e.name}</option>
                                    </c:if>
                                </c:forEach>
                            </select>

                            <!-- <select name="job" style="appearance: auto; ">
                            <option value="秘书" selected>秘书</option>
                            <option value="经理">经理</option>
                            <option value="工程师">工程师</option>
                            <option value="设计师">设计师</option>
                            <option value="分析师">分析师</option>
                        </select> -->
                        </div>
                    </div>

                    <div class="mdui-col-sm-6">
                        <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0" style="overflow:visible;">
                            <div class="mdui-textfield-label" style="color: gray;">部门</div>
                            <select class="mdui-select" name="deptId" value="${emp.deptId}" mdui-select style="margin-left: 8rem;">
                                <c:forEach items="${dlist}" var="dept">
                                    <c:if test="${emp.deptId == dept.id}">
                                        <option value="${dept.id}" selected>${dept.name}</option>
                                    </c:if>
                                    <c:if test="${emp.deptId != dept.id}">
                                        <option value="${dept.id}">${dept.name}</option>
                                    </c:if>
                                </c:forEach>
                            </select>
                        </div>

                    </div>
                </div>

                <div class="mdui-row">
                    <div class="mdui-col-sm-6">

                        <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                            <div class="mdui-textfield-label" style="color: gray;">入职</div>
                            <div>
                            <input style="left: 20%; width: 80%; position: relative;" class="mdui-textfield-input" name="hireDate"
                                type="date" id="reg_username" value="<fmt:formatDate value='${emp.hireDate}' pattern="yyyy-MM-dd"/>" required />
                            </div>
                        </div>
                    </div>

                    <div class="mdui-col-sm-6">


                    </div>
                </div>

                <div class="mdui-row" style="margin-top: 2rem;">
                    <div class="mdui-col-sm-6">
                        <div style="text-align: left; float: left">
                            <button type="button" class="mdui-btn mdui-color-purple-50 mdui-ripple"
                                onclick="location.replace('emp_list')">返回</button>
                        </div>


                    </div>

                    <div class="mdui-col-sm-6" style="text-align: right;">
                        <button type="submit" class="mdui-btn mdui-color-theme mdui-ripple">提交</button>

                    </div>
                </div>
            </form>
        </div>
    </div>

</body>

</html>

<script>
    function logout() {
        window.location.replace('../logout')
    }
</script>

<style>
    .menu-item-text {
        padding: 6px;
    }

    .mdui-col-xs-6 {
        margin-top: inherit;
    }

    .row-layout {

        position: absolute;
        left: 20%;
        right: 20%;
        top: 15%;
    }

    .mdui-appbar {
        position: fixed;
        width: 100%;
    }

    .mdui-card {
        margin-bottom: 1rem;
    }
</style>